<template>
	<view class="smart-page">
		<!-- 页面标题开始 -->
		<view class="smart-page-head">
			<text class="smart-page-head-title">input输入控件</text>
		</view>
		<!-- 页面标题结束 -->

		<view>
			<text>可自动获取焦点</text>
			<view><input class="smart-input" focus="true" placeholder="请输入手机号" /></view>
		</view>

		<view>
			<text>右下角显示搜索</text>
			<view> <input class="smart-input" confirm-type="search" placeholder="输入要搜索的内容" /></view>
		</view>

		<view>
			<text>控制最大输入长度</text>
			<view><input class="smart-input" maxlength="5" confirm-type="search" placeholder="请输入内容" /></view>
		</view>

		<view>
			<text>密码输入</text>
			<view><input class="smart-input" password="true" confirm-type="search" placeholder="请输入内容" /></view>
		</view>

		<view>
			<text>可查看密码</text>
			<view class="wrapper">
				<input class="smart-input" :password="showPassword" placeholder="请输入密码" />
				</image>
			</view>
		</view>
<!-- <image class="eye" src="../../../../static/eye.png" @click="changePassword()" /> -->
		<view>
			<text>同步获取</text>
			<view><input class="smart-input" @input="onKeyInput" /></view>
			<view><text>{{inputValue}}</text></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showPassword: true,
				inputValue: ''
			}
		},
		methods: {
			/*显示隐藏密码*/
			changePassword() {
				console.log('点击……');
				this.showPassword = !this.showPassword;
			},
			/*输入事件*/
			onKeyInput(event) {
				console.log(event.detail.value);
				this.inputValue = event.detail.value;
			}
		}
	}
</script>
<style>
	.eye {
		width: 74upx;
		height: 74upx;
	}

	.wrapper {
		display: flex;
	}
</style>